<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!--demo.css是格式化CSS文件-->
    <link rel="stylesheet" href="../css/demo.css"/>
    <!--浮动菜单-->
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/index.css?v=11"/>

    <!--一以是轮播图样式↓-->

    <link rel="stylesheet" href="../css/style.css"/>
    <!--左滑样式-->
    <link rel="stylesheet" href="../css/luara.left.css"/>
    <!--Luara js文件-->
    <script src="../js/jquery.luara.0.0.1.min.js"></script>

</head>

<body>
<div id="header" class="top-title">
    <div class="header-left">
        <ul type="none" class="ulA">
            <li style="display:inline" class="liA">
                <a href="#" class="aa" style="text-decoration: none;">下载APP</a>
            </li>
            <li style="display:inline" class="liA">

                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>

            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">茂名</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">多云</a>
            </li>
            <li class="liA">
                <a href="#" class="aa" style="text-decoration: none;">14°-16°</a>
            </li>
        </ul>
    </div>
    <div class="header-right">
        <ul type="none" class="ulB">
            <li style="display:inline" class="liB">
                <a href="#" class="aa" style="text-decoration: none;">更多</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">反馈</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">图虫</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">头条号</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="#" class="aa" style="text-decoration: none;">问答</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB"
                style="margin-left: 10px;width: 60px;height: 34px;background-color:red;text-align: center">
                <a href="#" class="aa" style="text-decoration: none;">登陆</a>
            </li>
        </ul>
    </div>
</div>

<div id="index-ajax" class="index-ajax">
    <div id="left">

    </div>

    <div class="y-centre" >

        <div class="centre-buttom">
            <div class="listnew">


            </div>


        </div>
    </div>


    <div id="right"></div>
</div>
</body>
</html>




<script>
    var demo = new Vue({
        el: "#index-ajax",
        data: {

        },


        ready: function () {
            //this.getdata()
            //this.getNew()
            //console.log(this.menu)
        },
        methods: {
            getdata: function () {
                console.log(this.index)
            },
            next: function () {
                //一下代码是自动刷新↓↓↓↓↓↓↓
                var data = this.news
                //console.log(data, 'before')
                //concat() 方法用于连接两个或多个数组。
                data = data.concat(data)
                //console.log(data, 'after')
                this.news = data
            },
//            loadmore:function () {
//                demo.next()
//            },
        }
    })


    $(document).ready(function () {
        var range = 1550;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 20;            //设置加载最多次数
        var num = 1;
        var totalheight = 0;
        var main = $("#index-ajax");                     //主体元素
        var timenum=0

        $(window).scroll(function () {
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
            //console.log(" $(window).scrollTop()")
            console.log("页面的文档高度 ：" + $(document).height());
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            //浏览器的高度-距下边界长度<=0且1不等于20
            if (($(document).height() - range) <= totalheight && num != maxnum) {
                demo.next()

            }
        })
    })

</script>



